<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <base href="<%=basePath%>"/>
    <title>茶叶进销存系统 - 订单详情</title>
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        .detail-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .info-row {
            display: flex;
            margin-bottom: 15px;
            align-items: center;
        }
        .info-label {
            width: 120px;
            font-weight: 500;
            color: var(--text-regular);
        }
        .info-value {
            flex: 1;
            color: var(--text-primary);
        }
        .tea-icon {
            color: var(--primary-color);
            margin-right: 5px;
        }
        .section-header {
            font-size: 18px;
            color: var(--text-regular);
            margin: 30px 0 20px 0;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        .order-items-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .order-items-table th,
        .order-items-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        .order-items-table th {
            background-color: #f9faf7;
            font-weight: 500;
        }
        .total-row {
            background-color: #f0f4e8;
            font-weight: bold;
        }
        .status-badge {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }
        .status-pending {
            background-color: #fef0f0;
            color: #f56565;
        }
        .status-paid {
            background-color: #f0fff4;
            color: #38a169;
        }
        .status-shipped {
            background-color: #ebf8ff;
            color: #3182ce;
        }
        .status-completed {
            background-color: #f0fff4;
            color: #38a169;
        }
        .status-cancelled {
            background-color: #fef0f0;
            color: #f56565;
        }
        .btn-group {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
<div class="app-container">
    <!-- 侧边栏 -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-logo" onclick="toggleSidebar()">
            <span><i class="fas fa-leaf tea-icon"></i> 茶叶进销存系统</span>
        </div>

        <div class="sidebar-menu">
            <div
                    class="menu-item "
                    onclick="location.href='views/home.jsp'"
            >
                <i class="fas fa-home"></i>
                <span>系统首页</span>
            </div>
            <div class="menu-item" onclick="location.href='TeaServlet'">
                <i class="fas fa-coffee"></i>
                <span>茶叶管理</span>
            </div>
            <div class="menu-item" onclick="location.href='CategoryServlet'">
                <i class="fas fa-tags"></i>
                <span>分类管理</span>
            </div>
            <div class="menu-item" onclick="location.href='WarehouseServlet'">
                <i class="fas fa-boxes"></i>
                <span>仓库管理</span>
            </div>
            <div class="menu-item active" onclick="location.href='OrderServlet'">
                <i class="fas fa-receipt"></i>
                <span>订单管理</span>
            </div>
            <div class="menu-item" onclick="location.href='LogisticsServlet'">
                <i class="fas fa-shipping-fast"></i>
                <span>物流管理</span>
            </div>
            <div class="menu-item" onclick="location.href='SupplierServlet'">
                <i class="fas fa-truck"></i>
                <span>供应商管理</span>
            </div>
            <div class="menu-item" onclick="location.href='<%=basePath%>purchase/list'">
                <i class="fas fa-truck"></i>
                <span>采购管理</span>
            </div>
            <div class="menu-item" onclick="location.href='CustomerServlet'">
                <i class="fas fa-users"></i>
                <span>客户管理</span>
            </div>
            <div class="menu-item" onclick="location.href='AddressServlet'">
                <i class="fas fa-map-marker-alt"></i>
                <span>地址管理</span>
            </div>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <!-- 顶部导航栏 -->
        <div class="navbar">
            <div class="navbar-left">
                <h3><i class="fas fa-eye tea-icon"></i> 订单详情</h3>
            </div>
            <div class="navbar-right">
                <span><i class="fas fa-user tea-icon"></i> 欢迎，${ username}管理员</span>
                <a href="logout" class="el-link el-link--danger ml-10"><i class="fas fa-sign-out-alt"></i> 退出</a>
            </div>
        </div>

        <!-- 内容卡片 -->
        <div class="el-card fade-in">
            <div class="el-card__header">
                <span><i class="fas fa-info-circle tea-icon"></i> 订单信息</span>
            </div>
            <div class="el-card__body">
                <div class="detail-container">
                    <div class="section-header">
                        <i class="fas fa-receipt tea-icon"></i> 基本信息
                    </div>

                    <div class="info-row">
                        <div class="info-label"><i class="fas fa-barcode tea-icon"></i> 订单编号：</div>
                        <div class="info-value">${order.order_no}</div>
                    </div>

                    <div class="info-row">
                        <div class="info-label"><i class="fas fa-user tea-icon"></i> 客户姓名：</div>
                        <div class="info-value">${order.customer_name}</div>
                    </div>

                    <div class="info-row">
                        <div class="info-label"><i class="fas fa-money-bill tea-icon"></i> 订单金额：</div>
                        <div class="info-value">¥<fmt:formatNumber value="${order.total_amount}" pattern="#,##0.00"/></div>
                    </div>

                    <div class="info-row">
                        <div class="info-label"><i class="fas fa-flag tea-icon"></i> 订单状态：</div>
                        <div class="info-value">
                            <c:choose>
                                <c:when test="${order.status == 0}">
                                    <span class="status-badge status-pending">待支付</span>
                                </c:when>
                                <c:when test="${order.status == 1}">
                                    <span class="status-badge status-paid">已支付</span>
                                </c:when>
                                <c:when test="${order.status == 2}">
                                    <span class="status-badge status-shipped">已发货</span>
                                </c:when>
                                <c:when test="${order.status == 3}">
                                    <span class="status-badge status-completed">已完成</span>
                                </c:when>
                                <c:when test="${order.status == 4}">
                                    <span class="status-badge status-cancelled">已取消</span>
                                </c:when>
                            </c:choose>
                        </div>
                    </div>


                    <c:if test="${not empty order.payment_time}">
                        <div class="info-row">
                            <div class="info-label"><i class="fas fa-credit-card tea-icon"></i> 支付时间：</div>
                            <div class="info-value">
                                <fmt:formatDate value="${order.payment_time}" pattern="yyyy-MM-dd"/>
                            </div>
                        </div>
                    </c:if>

                    <div class="section-header">
                        <i class="fas fa-shopping-cart tea-icon"></i> 订单商品
                    </div>

                    <table class="order-items-table">
                        <thead>
                        <tr>
                            <th>商品名称</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>小计</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${orderItems}" var="item">
                            <tr>
                                <td>${item.tea_name}</td>
                                <td>¥<fmt:formatNumber value="${item.unit_price}" pattern="#,##0.00"/></td>
                                <td><fmt:formatNumber value="${item.quantity}" pattern="#,##0.##"/></td>
                                <td>¥<fmt:formatNumber value="${item.unit_price*item.quantity}" pattern="#,##0.00"/></td>
                            </tr>
                        </c:forEach>
                        <tr class="total-row">
                            <td colspan="3" style="text-align: right;">订单总金额：</td>
                            <td>¥<fmt:formatNumber value="${order.total_amount}" pattern="#,##0.00"/></td>
                        </tr>
                        </tbody>
                    </table>

                    <div class="btn-group">
                        <button type="button" class="el-button" onclick="history.back()">
                            <i class="fas fa-arrow-left"></i> 返回
                        </button>
                        <c:if test="${order.status == 0}">
                            <button type="button" class="el-button el-button--success" onclick="updateStatus(${order.order_id}, 1)">
                                <i class="fas fa-check"></i> 标记为已支付
                            </button>
                            <button type="button" class="el-button el-button--danger" onclick="updateStatus(${order.order_id}, 4)">
                                <i class="fas fa-times"></i> 取消订单
                            </button>
                        </c:if>
                        <c:if test="${order.status == 1}">
                            <button type="button" class="el-button el-button--primary" onclick="updateStatus(${order.order_id}, 2)">
                                <i class="fas fa-shipping-fast"></i> 标记为已发货
                            </button>
                        </c:if>
                        <c:if test="${order.status == 2}">
                            <button type="button" class="el-button el-button--success" onclick="updateStatus(${order.order_id}, 3)">
                                <i class="fas fa-check-circle"></i> 标记为已完成
                            </button>
                        </c:if>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 侧边栏收缩状态
    let isCollapsed = false;

    // 切换侧边栏状态
    function toggleSidebar() {
        const sidebar = document.getElementById('sidebar');
        isCollapsed = !isCollapsed;

        if(isCollapsed) {
            sidebar.classList.add('collapsed');
            localStorage.setItem('sidebarCollapsed', 'true');
        } else {
            sidebar.classList.remove('collapsed');
            localStorage.setItem('sidebarCollapsed', 'false');
        }
    }

    function updateStatus(orderId, status) {
        const statusText = ['待支付', '已支付', '已发货', '已完成', '已取消'];
        if (confirm('确定要将订单状态更新为"' + statusText[status] + '"吗？')) {
            location.href = 'OrderServlet?action=updateStatus&id=' + orderId + '&status=' + status;
        }
    }

    // 页面加载时检查状态
    window.onload = function() {
        const savedState = localStorage.getItem('sidebarCollapsed');
        if(savedState === 'true') {
            document.getElementById('sidebar').classList.add('collapsed');
            isCollapsed = true;
        }
    }
</script>
</body>
</html>
